
loadPage();

function loadPage() {
    getTaskList("", "", "");
    addClickEventForAddTaskBen();
}

function getTaskList(taskID, taskTile, assignedToUser) {
    // 1 准备参数
    const url = "/API"
    const parameters = {
        APICommand: "taskList",
        TaskID: taskID,
        TaskTitle: taskTile,
        AssignedToUser: assignedToUser
    }
    // 2 调⽤ getAPICommandData() ⽅法
    getAPICommandData(url, parameters).then((data) => {
        // 把返回的 TaskList 循环添加⾄ tbody 中的 html 代码
        let tbodyHtml = "";
        const taskList = data.Data.TaskList;
        if (taskList.length !== 0) {
            for (let i = 0; i < taskList.length; i++) {
                tbodyHtml +=
                    "<tr>"
                    + ` <td>${taskList[i].TaskID}</td>`
                    + ` <td>${taskList[i].Task}</td>`
                    + ` <td>${taskList[i].AssignedToUserID}</td>`
                    + ` <td>${taskList[i].AssignedToUser}</td>`
                    + ` <td>${taskList[i].TaskType}</td>`
                    + ` <td>${taskList[i].TaskStatus}</td>`
                    + ` <td>${taskList[i].ProjectID}</td>`
                    + ` <td>${taskList[i].UpdatedBy}</td>`
                    + ` <td>${taskList[i].TimeUpdate}</td>`
                    + ` <td>${taskList[i].CreatedBy}</td>`
                    + ` <td>${taskList[i].TimeCreated}</td>`
                + ` <td taskId="${taskList[i].TaskID}"><button class="editTaskBtn"><img src="../image/upload.png" style="width: 15px;"></button>
                <button class="deleteTaskBtn"><img src="../image/delete.png" style="width: 15px;"></button></td>`
                    + "<tr>"
            }
        }
        else {
            document.querySelector("#taskTableContainer").innerHTML = "未查询到 Task 数据！";
            return;
        }
        // 将 tbodyHtml 代码加载回⻚⾯
        document.querySelector("#taskListBody").innerHTML = tbodyHtml;
        addClickEventForEditTaskBtn()
        addClickEventForDeleteTaskBtn()
    })
}


function addClickEventForAddTaskBen() {
    document.querySelector("#addTaskBtn").addEventListener("click", ()=> {
        location.href = "/Home?DashboardID=3";
    });
}


document.querySelector("#queryBtn").addEventListener("click", () => {
    const taskID = document.querySelector("[name='taskID']").value;
    const taskTile = document.querySelector("[name='task']").value;
    const assignedToUser = document.querySelector("[name='assignedToUser']").value;
    getTaskList(taskID, taskTile, assignedToUser);
});

function addClickEventForEditTaskBtn() {
    // 获取到多个 Edit 按钮，遍历
    const editTaskBtnList = document.querySelectorAll(".editTaskBtn");
    editTaskBtnList.forEach((element) => {
        // 给每⼀个按钮添加点击事件
        element.addEventListener("click", () => {
            const taskID = element.closest("td").getAttribute("taskId");
            location.href = "/Home?DashboardID=3&TaskID=" + taskID;
        });
    });
}


function addClickEventForDeleteTaskBtn() {
    // 获取到多个 Delete 按钮，遍历
    const deleteTaskBtnList = document.querySelectorAll(".deleteTaskBtn");
    deleteTaskBtnList.forEach((element) => {
        // 给每⼀个按钮添加点击事件
        element.addEventListener("click", () => {
            const taskID = element.closest("td").getAttribute("taskId");
            const isDelete = confirm(`您确认要删除 TaskID 为 ${taskID} 的数据吗?`);
            if (isDelete) {
                deleteTask(taskID);
            }
        });
    });
}
function deleteTask(taskID) {
    const url = "/API";
    const parameter = {
        APICommand: "deleteTask",
        TaskID: taskID
    };
    getAPICommandData(url, parameter).then((data) => {
        if (data.Data.DeleteTaskStatus) {
            alert(data.Data.Message);
            // 重新加载 Task 列表
            getTaskList("", "", "");
        } else {
            alert(data.Data.Message);
        }
    });
}